
<template>
    <div>
        <!-- 链接 -->
        <el-form-item label="链接方式" v-if="Object.keys(data.options).indexOf('linkType')>=0">
            <el-radio-group v-model="data.options.linkType">
                <el-radio-button label="inline">内链</el-radio-button>
                <el-radio-button label="outer">外链</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="链接地址" v-if="Object.keys(data.options).indexOf('linkUrl')>=0">
            <el-input v-model="data.options.linkUrl"/>
        </el-form-item>
        <el-form-item label="参数" v-if="Object.keys(data.options).indexOf('query')>=0">
            <el-input v-model="data.options.query"/>
        </el-form-item>
        <el-form-item label="显示头像" v-if="Object.keys(data.options).indexOf('isShowAvatar')>=0">
            <el-switch v-model="data.options.isShowAvatar"/>
        </el-form-item>
        
        <el-form-item label="图片方式" v-if="Object.keys(data.options).indexOf('imgType')>=0">
            <el-radio-group v-model="data.options.imgType">
                <el-radio-button label="image">图片</el-radio-button>
                <el-radio-button label="icon">icon</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <!-- 样式开始 -->
        <el-form-item label="图片右边距：" v-if="Object.keys(data.options).indexOf('imgMarginRight')>=0">
            <el-input style="width: 180px;" v-model="data.options.imgMarginRight"/>
        </el-form-item>
        <el-form-item label="内边距：" v-if="Object.keys(data.options).indexOf('padding')>=0">
            <el-input style="width: 180px;" v-model="data.options.padding"/>
        </el-form-item>
        <el-form-item label="上边距：" v-if="Object.keys(data.options).indexOf('marginTop')>=0">
            <el-input style="width: 180px;" v-model="data.options.marginTop"/>
        </el-form-item>
        <el-form-item label="下边距：" v-if="Object.keys(data.options).indexOf('marginBottom')>=0">
            <el-input style="width: 180px;" v-model="data.options.marginBottom"/>
        </el-form-item>
        <el-form-item label="左边距：" v-if="Object.keys(data.options).indexOf('marginLeft')>=0">
            <el-input style="width: 180px;" v-model="data.options.marginLeft"/>
        </el-form-item>
        <el-form-item label="右边距：" v-if="Object.keys(data.options).indexOf('marginRight')>=0">
            <el-input style="width: 180px;" v-model="data.options.marginRight"/>
        </el-form-item>
        <el-form-item label="最小值" v-if="Object.keys(data.options).indexOf('min')>=0">
            <el-input-number v-model="data.options.min" :min="0" :max="100" :step="1"/>
        </el-form-item>
        <el-form-item label="最大值" v-if="Object.keys(data.options).indexOf('max')>=0">
            <el-input-number v-model="data.options.max" :min="0" :max="100" :step="1"/>
        </el-form-item>
        <el-form-item label="步长" v-if="Object.keys(data.options).indexOf('step')>=0">
            <el-input-number v-model="data.options.step" :min="0" :max="100" :step="1"/>
        </el-form-item>

        <el-form-item label="占位内容" v-if="Object.keys(data.options).indexOf('placeholder')>=0 && (data.type!='BaseDateTime')">
            <el-input v-model="data.options.placeholder"/>
        </el-form-item>
        <el-form-item label="绑定Key值" v-if="data.type!='BaseGrid'">
            <el-input v-model="data.model"/>
        </el-form-item>
        <el-form-item label="操作属性" v-if="data.type=='BaseInput' || data.type=='BaseRadio' || data.type=='BaseTextarea' || data.type=='BaseNumber'">
            <el-checkbox v-model="data.options.readonly" v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读</el-checkbox>
            <el-checkbox v-model="data.options.disabled" v-if="Object.keys(data.options).indexOf('disabled')>=0">禁用	</el-checkbox>
            <el-checkbox v-model="data.options.editable" v-if="Object.keys(data.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
            <el-checkbox v-model="data.options.clearable" v-if="Object.keys(data.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
            <el-checkbox v-model="data.options.arrowControl" v-if="Object.keys(data.options).indexOf('arrowControl')>=0">使用箭头进行时间选择</el-checkbox>
        </el-form-item>
        <el-form-item label="校验" v-if="data.type=='BaseInput' || data.type=='BaseRadio' || data.type=='BaseTextarea' || data.type=='BaseNumber'">
            <div>
                <el-checkbox v-model="data.options.required">必填</el-checkbox>
            </div>
            <el-select v-if="Object.keys(data.options).indexOf('dataType')>=0" v-model="data.options.dataType" size="mini" >
                <el-option value="string" label="字符串"/>
                <el-option value="number" label="数字"/>
                <el-option value="boolean" label="布尔值"/>
                <el-option value="integer" label="整数"/>
                <el-option value="float" label="浮点数"/>
                <el-option value="url" label="URL地址"/>
                <el-option value="email" label="邮箱地址"/>
                <el-option value="hex" label="十六进制"/>
            </el-select>
            <div v-if="Object.keys(data.options).indexOf('pattern')>=0">
                <el-input size="mini" v-model.lazy="data.options.pattern" style=" width: 240px;" placeholder="填写正则表达式"/>
            </div>
        </el-form-item>
    </div>
</template>
<style lang="scss" scoped>
    .form-item{
        label{
            font-size: 14px;
            color: #606266;
            line-height: 40px;
            font-weight: 500;
        }
        .margin-box{
            position: relative;
            height: 200px;
            width: 100%;
            border: 1px solid #dcdcdc;
            .p-center,.m-center{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 60px;
                height: 60px;
            }
            .p-center{
                border: 1px dashed #ccc;
            }
            .m-center{
                border: 1px solid #ccc;
            }
            .el-input{
                position: absolute;
                width: 70px;
                height: 30px;
            }
            .left{
                left: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            .right{
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            .top{
                left: 50%;
                top: 20px;
                transform: translateX(-50%);
            }
            .bottom{
                left: 50%;
                bottom: 20px;
                transform: translateX(-50%);
            }
        }
    }
</style>
<script>
export default {
    name: 'CommonSetConfig',
    props: {
        data: {
            type: Object
        }
    },

    methods: {

    }
}
</script>

